<template>
  <div>
    <el-table
      :data="tableData"
      header-cell-class-name="eltablebg"
      style="width: 100%;margin-bottom:30px"
    >
      <el-table-column
        prop="create_time"
        :label="$t('assets.time')"
      ></el-table-column>
      <el-table-column prop="name" :label="$t('exchange.tradingPair')">
        <template #default="r">
          <span>{{ r.row.currency_name + "/" + r.row.legal_name }}</span>
          <span>
            {{
              r.row.lever_schema == 1
                ? $t("exchange.marketPrice")
                : r.row.lever_schema == 2
                ? $t("exchange.limitPrice")
                : $t("exchange.stopLoss")
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="lever_type" :label="$t('exchange.direction')">
        <template #default="r">
          <span :class="r.row.lever_type == 1 ? 'text-green' : 'text-red'">
            {{
              r.row.lever_type == 1
                ? $t("exchange.doMore")
                : $t("exchange.short")
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="lever_open_price"
        :label="$t('exchange.openingPrice')"
      >
        <template #default="r">{{
          $currency(r.row.lever_open_price)
        }}</template>
      </el-table-column>
      <el-table-column prop="lever_hand" :label="$t('exchange.lot')">
        <template #default="r">{{ $currency(r.row.lever_hand) }}</template>
      </el-table-column>
      <el-table-column
        prop="lever_earnest_money"
        :label="$t('exchange.margin')"
      >
        <template #default="r">{{
          $currency(r.row.lever_earnest_money)
        }}</template>
      </el-table-column>
      <el-table-column prop="" :label="$t('assets.operate')">
        <template #default="r">
          <span class="personlink mr-20 point" @click="winclose(r.row)">{{
            $t("exchange.stopLoss")
          }}</span>
          <span class="personlink point" @click="close(r.row.id)">{{
            $t("exchange.cancelOrder")
          }}</span>
        </template>
      </el-table-column>
      <template #empty>
        <Norecord />
      </template>
    </el-table>
    <Messagebox
      :text="$t('assets.revokeTip')"
      :dialog="state.dialog"
      :type="3"
      @onconfirm="confirm"
      @oncancer="state.dialog = false"
    />
  </div>
</template>

<script>
import Messagebox from "@/components/messageBox/index.vue";
import { reactive } from "vue";
import { cancelOrderLever } from "@/api/currency";
import { democancelOrderLever } from "@/api/demo";
import { ElMessage } from "element-plus";
import Norecord from "@/components/noRecord/NoRecord.vue";
import UseSystemSetting from "@/commonapi/useSystemSetting";

export default {
  name: "Currentcommission",
  props: {
    total: Number,
    current: Number,
    size: Number,
    tableData: Array,
    curentPage: Number,
  },
  emits: ["winclose", "close"],
  components: { Messagebox, Norecord },
  setup(props, { emit }) {
    const state = reactive({
      dialog: false,
      closeId: "",
    });
    // 获取开关状态
    const { virtual_wallet } = UseSystemSetting();
    // 点击止盈止损
    const winclose = (item) => {
      emit("winclose", item);
    };
    // 点击撤单
    const close = (id) => {
      state.closeId = id;
      state.dialog = true;
    };
    const confirm = () => {
      let setFun = virtual_wallet.value
        ? democancelOrderLever
        : cancelOrderLever;
      setFun(state.closeId).then((res) => {
        if (res.code === 200) {
          ElMessage({
            type: "success",
            message: res.message,
          });
          emit("close");
          state.dialog = false;
        }
      });
    };
    return {
      state,
      confirm,
      close,
      winclose,
    };
  },
};
</script>

<style scoped lang="less">
.jump {
  width: 44px;
  height: 20px;
  line-height: 20px;
  margin-inline-start: 10px;
}
.page {
  width: 20px;
  height: 20px;
}
.mr-20 {
  margin-inline-end: 20px;
}
</style>
